<div class="el-tree-node" 
    (click)="clickHandle($event)" 
    [class.is-focusable]="!root.disabled"
    [class.is-checked]="!root.disabled && model.checked" 
    [class.is-expanded]="model.expanded" 
    [class.is-current]="model.current" 
    [class.is-hidden]="model.visible" 
    role="treeitem"
    >
    <div class="el-tree-node__content" [ngStyle]="{ 'padding-left': (model._level - 1) * indent + 'px' }"> 
        <span  class="el-tree-node__expand-icon el-icon-caret-right" 
            [class.expanded]="model.expanded"
            [class.is-leaf]="isLeaf()" 
            (click)="iconClickHandle($event)"></span>
        <el-checkbox *ngIf="root.showCheckbox" [model]="model.checked" [indeterminate]="model._indeterminate"
            [disabled]="root.disabled" (modelChange)="checkHandle($event)" > </el-checkbox> <span
            class="el-tree-node__label">{{ model.label }}</span>
    </div>
    <div class="el-tree-node__children" role="group" *ngIf="!isLeaf()" [@dropAnimation]="model.expanded">
        <el-tree-item *ngFor="let item of model.children" [model]="item" [indent]="indent"> </el-tree-item>
    </div>
</div>